import { languageModelList } from "@/services/languageModel";
import { Form, Input, Button, Table, Icon } from "antd";
import React from "react";
import robotStyle from "@/pages/robotManagement/robotEdit.less"
import styles from "../index.less"
import BackRouter from "@/pages/robotManagement/backRouter"
import moment from "moment";
import ChangeModel from "./changeModel";
import UsingModelList from "../usingModelList";

class ModelList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 1,
      size: 10,
      total: "",
      loading: false,
      list: [],
    }
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this)
    }
  }

  getList = () => {
    const { form: { getFieldsValue }, applicationId } = this.props;
    const { current, size } = this.state;
    this.setState({ loading: true }, async () => {
      let obj = { current, size, name: getFieldsValue().search, applicationId: applicationId };
      const res = await languageModelList(obj)
      this.setState({ loading: false, list: res.records, total: res.total });
    })
  }

  doSearch = (current, size) => {
    this.setState({ current, size }, () => this.getList())
  }

  changeModel = row => {
    this.ChangeModel.initModal(row)
  }

  openUseModel = (id) => {
    this.UsingModelList.initModal(id)
  }

  render() {
    const { current, size, total, list, loading } = this.state;
    const { form: { getFieldDecorator }, applicationId } = this.props;
    const columns = [
      {
        title: "模型名称",
        dataIndex: "name",
        width: 200
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        width: 200,
        render: time => {
          return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : null
        }
      },
      {
        title: "启用时间",
        dataIndex: "usedTime",
        width: 200,
        render: time => {
          return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : null
        }
      },
      {
        title: "描述",
        dataIndex: "comment",
        width: 300
      },
      {
        title: "测试状态",
        dataIndex: "status",
        width: 150,
        render: (status, row) => {
          let text = '';
          switch (status) {
            case 0:
              text = '未测试';
              break;
            case 1:
              text = '未通过';
              break;
            case 2:
              text = '通过';
              break;
          }
          return (
            <div>
              <span style={{ color: status == 1 ? 'red' : '' }}>{text}</span>
            </div>
          )
        }
      },
      {
        title: "当前使用",
        dataIndex: "used",
        width: 150,
        align: 'center',
        render: (used, row) => {
          return used ? (
            <div className={styles.useStyle} onClick={() => this.openUseModel(row.id)}>
              <span className={styles.roundOut}><span className={styles.roundIn}></span></span>
              <span>使用中</span>
            </div>
          ) : '-'
        }
      },
      {
        title: "操作",
        width: 200,
        render: (text, row) => {
          return (
            row.used ? '' : <Button type="primary" icon="swap" size="small" style={{ background: "#32B16C", border: "none" }} onClick={() => this.changeModel(row)}>切换模型</Button>)
        }
      }
    ];

    return (
      <div>
        <div className={styles.robotTop}>
          <div className={robotStyle.title} style={{ height: '32px', lineHeight: '32px', margin: 0 }}>
            <span>大语言模型配置</span>
          </div>
          <div>
            <BackRouter pathname='/enterprise/robotManagement'></BackRouter>
          </div>
        </div>
        <div style={{ marginBottom: 24 }}>
          <Form layout="inline">
            <Form.Item>
              {getFieldDecorator("search")(<Input placeholder="请输入模型名称" />)}
            </Form.Item>
            <Form.Item>
              <Button type="primary" onClick={() => this.doSearch(1, size)}>查询</Button>
            </Form.Item>
          </Form>
        </div>

        <Table
          columns={columns}
          dataSource={list}
          loading={loading}
          scroll={{ x: "auto" }}
          rowKey={'id'}
          pagination={{
            current,
            pageSize: size,
            showQuickJumper: true,
            showSizeChanger: true,
            onChange: this.doSearch,
            onShowSizeChange: this.doSearch
          }}
        />

        <ChangeModel onRef={ref => this.ChangeModel = ref} applicationId={applicationId} freshList={this.getList} />

        <UsingModelList onRef={ref => this.UsingModelList = ref} />
      </div>
    )
  }
}

export default Form.create()(ModelList)